<template>
	<view class="comment">
		<view class="comment-tags flexWrap">
			<u-tag :text="`全 部（${listQuery.total})`" plain plainFill :type="listQuery.status === '' ? 'error' : 'info'"
				@click="tagsChange('')" />
			<u-tag text="最 新" plain icon="clock" plainFill :type="listQuery.status === 'newest' ? 'error' : 'info'"
				@click="tagsChange('newest')" />
			<u-tag v-if="token" text="我 的" plain plainFill :type="listQuery.status === 'own' ? 'error' : 'info'"
				@click="tagsChange('own')" />
		</view>

		<template v-if="tableData.length > 0">
			<view v-for="(item,index) in tableData" :key="index" class="comment-content mt20 mb20">
				<u-skeleton rows="3" avatar avatarSize="70rpx" :title="false" :loading="loading">
					<view class="comment-content-header flex mb10">
						<u--image :showLoading="true" :src="item.user.avatar[0].url" width="70rpx" height="70rpx" />
						<view class="flexCol ml15">
							<text>{{ item.user.userName || '匿名买家' }}</text>
							<text class="fs12" style="color: #909399;">{{ item.createTime | parseTime }}</text>
						</view>
					</view>
					<view class="comment-content-content fs14">
						{{ item.description }}
					</view>
				</u-skeleton>
			</view>
			<u-loadmore :status="indexStatus" nomoreText="实在没有了" />
		</template>

		<u-empty v-else mode="list" text="宝贝暂无评论~" />
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/utils/util.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		options: {
			styleIsolation: 'shared'
		}, // 父组件设置 options.styleIsolation 可穿透子组件，以及页面
		filters: {
			parseTime(value) {
				return parseTime(value)
			}
		},
		data() {
			return {
				loading: true,
				tableData: [], // 主数据
				indexStatus: '', // 加载更多状态显示
				listQuery: {
					page: 1, // 页码
					size: 10,
					status: '',
					total: 0, // 总数
					pageNum: 0, // 页数
					goodsId: '', // 商品Id
				}
			}
		},
		computed: {
			...mapGetters(['token'])
		},
		onShow() {
			const routes = getCurrentPages()
			this.listQuery.goodsId = routes[routes.length - 1].options.goodsId // 赋值当前页面路径
			this.getList()
		},
		// 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
		onReachBottom() {
			if (this.listQuery.page === this.listQuery.pageNum) { // 已到最后一页
				this.indexStatus = 'nomore'
				return
			}
			this.indexStatus = 'loading ' // 开始加载
			this.listQuery.page = this.listQuery.page + 1
			this.getList()
		},
		methods: {
			// 切换评论标签
			tagsChange(status) {
				this.loading = true,
				this.tableData = [], // 主数据
				this.listQuery = {
					page: 1, // 页码
					size: 10,
					status: '',
					total: 0, // 总数
					pageNum: 0, // 页数
					goodsId: '', // 商品Id
				}
				
				this.listQuery.status = status
				const routes = getCurrentPages()
				this.listQuery.goodsId = routes[routes.length - 1].options.goodsId // 赋值当前页面路径
				this.getList()
			},
			// 初始化
			async getList() {
				this.loading = true
				const {
					code,
					data
				} = await this.$comment.commentGetStatusList(this.listQuery)
				if (code === 0) {
					this.listQuery.total = data.total
					this.listQuery.pageNum = data.pageNum
					this.tableData.push(...data.list)
					
					if (this.listQuery.page === this.listQuery.pageNum) {
						this.indexStatus = 'nomore'
					} else {
						this.indexStatus = 'loadmore' // 加载完成修改为初始状态
					}
					setTimeout(() => {
						this.loading = false
					}, 400)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-skeleton {
		&__wrapper__content {
			&__rows {
				width: 100% !important;
			}
		}
	}

	.comment {
		padding: 25rpx 30rpx;

		&-tags {
			/deep/ .u-tag {
				margin-right: 30rpx !important;
			}
		}

		&-content {
			background: #FFFFFF;
			padding: 25rpx 15rpx;
			border-radius: 12rpx;
			color: #606266;
		}
	}
	/deep/ .u-empty{
		margin-top: 100rpx !important;
	}
</style>
